<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="q-py-xs bg-white text-grey-8"
              style="box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0; padding-bottom: 2px" elevated height-hint="98">
      <q-toolbar style="margin-top: -4px;">
        <div class="inline-block" style="width: 500px">
          <q-avatar square>
            <img src="../../assets/logo.png" alt="">
          </q-avatar>
          <div class="inline-block overflow-hidden vertical-middle q-px-sm" style="line-height: 38px;font-size: 18px">
            <q-breadcrumbs active-color="none">
              <transition-group name="breadcrumb">
                <template v-for="(v,i) in breadcrumbs">
                  <q-breadcrumbs-el v-if="v.title" style="vertical-align: middle"
                                    :label="v.title"
                                    :icon="v.icon === '' ? undefined : v.icon"
                                    :key="i+v.title">
                    <template slot="default">
                      <div v-if="breadcrumbs.length !== i+1" class="q-mx-sm">
                        /
                      </div>
                    </template>
                  </q-breadcrumbs-el>
                </template>
              </transition-group>
            </q-breadcrumbs>
          </div>
        </div>
        <q-space/>
        <slot name="header"></slot>
        <q-btn v-for="module in modules" :key="module.name" :to="{name:module.goName}"
               :label="module.title" class="q-mx-sm"
               align="between" icon-right="open_in_new"
        ></q-btn>
        <toolbar-item-right/>
      </q-toolbar>
      <q-separator color="grey-3"/>
      <slot name="nav"></slot>
      <q-tabs align="left" class="text-teal" inline-label>
        <q-route-tab v-for="route in routes" :key="route.name"
                     :to="{name:route.name}" :label="route.meta.title"
                     :icon="route.meta.icon || 'dashboard_customize'"/>
      </q-tabs>
    </q-header>
    <q-page-container>
      <q-page>
        <keep-alive>
          <router-view/>
        </keep-alive>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import ToolbarItemRight from 'components/Toolbar/ToolbarItemRight'
import moduleRoutes from 'src/router/modulesRoutes'

export default {
  name: 'AdminLayout',
  components: {
    ToolbarItemRight
  },
  data () {
    return {
      left: false,
      navigation: {},
      modules: [],
      routes: [],
      breadcrumbs: []
    }
  },
  mounted () {
    this.modules = moduleRoutes.map(e => {
      return {
        name: e.name,
        path: e.path,
        title: e.meta.title,
        goName: e.children.filter(e => !e.redirect)[0].name
      }
    }).filter(e => !this.$route.matched.find(matched => e.name === matched.name))
    const currentModule = moduleRoutes.find(e => e.name === this.$route.matched[0].name)
    this.routes = currentModule.children.filter(e => !!e.name)
    this.initBreadcrumbs()
  },
  watch: {
    $route () {
      this.initBreadcrumbs()
    }
  },
  methods: {
    initBreadcrumbs () {
      this.breadcrumbs = this.$route.matched.map(e => {
        return {
          title: e.meta.title
        }
      })
    }
  }
}
</script>

<style lang="scss">

/* breadcrumb transition */

.breadcrumb-enter {
  opacity: 0;
  transform: translateX(100px);
}

.breadcrumb-enter-active {
  transition: all .5s;
}

.breadcrumb-enter-to {
  opacity: 1;
}

.breadcrumb-leave {
  opacity: 1;
  transform: translateX(0px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  transition: all .5s;
  position: absolute !important;
}

.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(65px);
}

</style>
